<template>
  <div>
    <s-breadcrumb></s-breadcrumb>
    <el-card>
      <!-- 搜索区 -->
      <el-form  ref="refresh_ref" :model="query_info" :rules="refresh_rules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="7">
            <el-form-item label="名称" prop="key">
              <el-input placeholder="请输入名称" maxlength="30" v-model="query_info.key" clearable @clear="get_list()"  show-word-limit></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="状态" prop="status">
              <el-select v-model="query_info.status" placeholder="请选择状态" clearable @clear="get_list()">
                <el-option label="禁用" value="0"></el-option>
                <el-option label="启用" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="11">
            <el-form-item label="添加时间" prop="created_at">
              <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="query_info.created_at" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="编辑时间" prop="updated_at">
              <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="query_info.updated_at" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable>
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row :gutter="20" class="s_row">
        <el-col :span="2">
          <el-button type="primary" @click="get_list()">查询</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="success" @click="refresh()">重置</el-button>
        </el-col>
        <el-col :span="2">
          <el-button :disabled="store_btn" type="info" @click="add_dialog_visible = true">添加</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="info" @click="$router.go(-1)">返回</el-button>
        </el-col>
      </el-row>
      <!-- 表格区 -->
      <el-table :data="list" border>
        <el-table-column align="center" label="编号" prop="id" width="80" fixed="left" sortable></el-table-column>
        <el-table-column align="center" label="名称" prop="name" width="100"></el-table-column>
        <el-table-column align="center" label="简称" prop="short_name" width="100"></el-table-column>
        <el-table-column align="center" label="拼音" prop="pinyin" width="100"></el-table-column>
        <el-table-column align="center" label="状态" prop="status" width="150">
          <template slot-scope="scope">
            <el-tooltip effect="dark" :content="scope.row.status?'启用':'禁用'" placement="top" :enterable="false">
              <el-switch :disabled="status_btn" v-model="scope.row.status" active-color="#5FB878" inactive-color="#d2d2d2" @change="set_status(scope.row)"></el-switch>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="排序" align="center" prop="sort" width="100" sortable>
          <template slot-scope="scope">
              <el-input v-model="scope.row.sort" :disabled="sorts_btn" @blur="set_sorts(scope.row)"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="区号" prop="city_code" width="100"></el-table-column>
        <el-table-column align="center" label="邮编" prop="zip_code" width="100"></el-table-column>
         <el-table-column align="center" label="经度" prop="lng" width="100"></el-table-column>
         <el-table-column align="center" label="纬度" prop="lat" width="100"></el-table-column>
        <el-table-column align="center" label="添加时间" prop="created_at" width="200" sortable></el-table-column>
        <el-table-column align="center" label="编辑时间" prop="updated_at" width="200" sortable></el-table-column>
        <el-table-column align="center" label="操作" width="200" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" :disabled="edit_btn" icon="iconfont icon-bianji" size="mini" @click="edit(scope.row.id)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 页码区 -->
      <el-pagination @size-change="handle_size_change" @current-change="handle_current_change" :total="total" :layout="layout" :current-page="query_info.page" :page-sizes="page_sizes" :page-size="query_info.pagesize"></el-pagination>
    </el-card>
    <!-- 添加对话框 -->
    <el-dialog title="添加" :visible.sync="add_dialog_visible" :width="percentage_width" @close="add_dialog_close">
      <!-- 主体区 -->
      <el-form label-width="100px" :model="add_form" :rules="rules"  ref="add_ref">
        <el-form-item label="名称" prop="name">
          <el-input placeholder="请输入名称" maxlength="30" clearable show-word-limit v-model="add_form.name"></el-input>
        </el-form-item>
        <el-form-item label="简称" prop="short_name">
          <el-input placeholder="请输入简称" maxlength="30" clearable show-word-limit v-model="add_form.short_name"></el-input>
        </el-form-item>
        <el-form-item label="拼音" prop="pinyin">
          <el-input placeholder="请输入拼音" maxlength="30" clearable show-word-limit v-model="add_form.pinyin"></el-input>
        </el-form-item>
         <el-form-item label="邮编">
           <el-input placeholder="请输入邮编" maxlength="30" clearable show-word-limit v-model="add_form.city_code"></el-input>
         </el-form-item>
         <el-form-item label="区号">
           <el-input placeholder="请输入区号" maxlength="30" clearable show-word-limit v-model="add_form.zip_code"></el-input>
         </el-form-item>
         <el-form-item label="经度">
           <el-input placeholder="请输入经度" maxlength="30" clearable show-word-limit v-model="add_form.lng"></el-input>
         </el-form-item>
         <el-form-item label="纬度">
           <el-input placeholder="请输入纬度" maxlength="30" clearable show-word-limit v-model="add_form.lat"></el-input>
         </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input type="number" placeholder="请输入排序" maxlength="10" clearable show-word-limit v-model="add_form.sort"></el-input>
        </el-form-item>
      </el-form>
      <!-- 按钮区 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="add_dialog_visible = false">取 消</el-button>
        <el-button :disabled="store_btn" type="primary" @click="add()">确 定</el-button>
        </span>
    </el-dialog>
    <!-- 编辑对话框 -->
    <el-dialog title="编辑" :visible.sync="edit_dialog_visible" :width="percentage_width" @close="edit_dialog_close">
      <!-- 主体区 -->
      <el-form label-width="100px" :model="edit_form" :rules="rules"  ref="edit_ref">
        <el-form-item label="名称" prop="name">
          <el-input placeholder="请输入名称" maxlength="30" clearable show-word-limit v-model="edit_form.name"></el-input>
        </el-form-item>
        <el-form-item label="简称" prop="short_name">
          <el-input placeholder="请输入简称" maxlength="30" clearable show-word-limit v-model="edit_form.short_name"></el-input>
        </el-form-item>
        <el-form-item label="拼音" prop="pinyin">
          <el-input placeholder="请输入拼音" maxlength="30" clearable show-word-limit v-model="edit_form.pinyin"></el-input>
        </el-form-item>
         <el-form-item label="邮编">
           <el-input placeholder="请输入邮编" maxlength="30" clearable show-word-limit v-model="edit_form.city_code"></el-input>
         </el-form-item>
         <el-form-item label="区号">
           <el-input placeholder="请输入区号" maxlength="30" clearable show-word-limit v-model="edit_form.zip_code"></el-input>
         </el-form-item>
         <el-form-item label="经度">
           <el-input placeholder="请输入经度" maxlength="30" clearable show-word-limit v-model="edit_form.lng"></el-input>
         </el-form-item>
         <el-form-item label="纬度">
           <el-input placeholder="请输入纬度" maxlength="30" clearable show-word-limit v-model="edit_form.lat"></el-input>
         </el-form-item>

        <el-form-item label="排序" prop="sort">
          <el-input type="number" placeholder="请输入排序" maxlength="10" clearable show-word-limit v-model="edit_form.sort"></el-input>
        </el-form-item>
      </el-form>
      <!-- 按钮区 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="edit_dialog_visible = false">取 消</el-button>
          <el-button :disabled="edit_btn" type="primary" @click="edit_send()">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    var checkSort = (rule, value, callback) => {
      // 定义正则表达式
      const regSort = /^[1-9]{1}[0-9]{0,10}$/
      if (regSort.test(value)) {
        return callback()
      }
      callback(new Error('请输入排序（大于0的数字）!'))
    }
    return {
      sorts_btn: this.is_string('auth/area/sorts'), // 排序按钮是否禁用
      status_btn: this.is_string('auth/area/status'), // 状态按钮是否禁用
      store_btn: this.is_string('auth/area/store'), // 添加按钮是否禁用
      edit_btn: this.is_string('auth/area/edit'), // 编辑按钮是否禁用
      percentage_width: this.$config.percentage_width, // 弹框的宽度
      page_sizes: this.$config.page_sizes, // 分页条数列表
      layout: this.$config.layout, // 表格分页组件配置
      query_info: {
        pid: 0, // 父级ID
        level_type: 1, // 级别
        key: '', // 查询条件
        status: '', // 状态
        created_at: [], // 添加时间
        updated_at: [], // 编辑时间
        page: this.$config.page, // 当前页码
        pagesize: this.$config.pagesize// 每页显示条数
      },
      list: [], // 列表数据
      total: 0, // 总数据条数
      // 添加对话框是否显示
      add_dialog_visible: false,
      // 编辑对话框是否显示
      edit_dialog_visible: false,
      add_form: {
        name: '',
        short_name: '',
        city_code: '',
        zip_code: '',
        lng: '',
        lat: '',
        pinyin: '',
        sort: 1
      },
      edit_form: {
        id: '',
        name: '',
        short_name: '',
        city_code: '',
        zip_code: '',
        lng: '',
        lat: '',
        pinyin: '',
        sort: 1
      },
      rules: {
        name: [
          { required: true, message: '请输入名称！', trigger: 'blur' }
        ],
        short_name: [
          { required: true, message: '请输入简称！', trigger: 'blur' }
        ],
        pinyin: [
          { required: true, message: '请输入拼音！', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请输入排序！', trigger: 'blur' },
          { validator: checkSort, trigger: 'blur' }
        ]
      },
      refresh_rules: { key: [], status: [], created_at: [], updated_at: [] }
    }
  },
  created () {
    if (this.$route.query.pid) {
      this.query_info.pid = this.$route.query.pid
    }
    if (this.$route.query.level_type) {
      this.query_info.level_type = this.$route.query.level_type
    }
    this.get_list()
  },
  methods: {
    // 获取列表
    get_list (callBack) {
      this.$base.request({
        that: this,
        url: 'auth/area/index',
        data: this.query_info
      }, (res) => {
        if (res.code === 8888) {
          this.list = res.data.list
          this.total = res.data.total
          callBack && callBack()
        }
      })
    },
    // 查看下级
    sublevel (info) {
      if (info.level_type === 1) {
        this.$router.push({ path: '/auth/area/index1', query: { pid: info.id, level_type: info.level_type + 1 } })
      } else {
        this.$router.push({ path: '/auth/area/index2', query: { pid: info.id, level_type: info.level_type + 1 } })
      }
    },
    // 刷新
    refresh () {
      this.$refs.refresh_ref.resetFields()
      this.get_list()
    },
    // 当前每页多少条选择
    handle_size_change (pagesize) {
      this.query_info.pagesize = pagesize
      this.get_list()
    },
    // 当前页码
    handle_current_change (page) {
      this.query_info.page = page
      this.get_list()
    },
    // 状态调整
    set_status (info) {
      this.$base.request({
        that: this,
        method: 'PUT',
        url: 'auth/area/status',
        data: { id: info.id, status: info.status ? 1 : 0 }
      }, (res) => {
        if (res.code === 8888) {
          this.$base.message({ that: this, message: res.msg })
        } else {
          info.status = !info.status
        }
      })
    },
    // 排序
    set_sorts (info) {
      this.$base.request({
        that: this,
        method: 'PUT',
        url: 'auth/area/sorts',
        data: { id: info.id, sort: info.sort }
      }, (res) => {
        if (res.code === 8888) {
          this.$base.message({ that: this, message: res.msg })
        } else {
          this.get_list()
        }
      })
    },
    // 监听添加对话框的关闭事件
    add_dialog_close () {
      this.$refs.add_ref.resetFields()
    },
    // 添加按钮
    add () {
      this.$refs.add_ref.validate(valid => {
        if (valid) {
          this.add_form.pid = this.query_info.pid
          this.add_form.level_type = this.query_info.level_type
          this.$base.request({
            that: this,
            method: 'POST',
            url: 'auth/area/store',
            data: this.add_form
          }, (res) => {
            if (res.code === 8888) {
              this.$base.message({ that: this, message: res.msg })
              this.add_dialog_visible = false
              this.get_list()
            }
          })
        }
      })
    },
    // 打开编辑按钮对话框
    edit (id) {
      this.$base.request({
        that: this,
        url: 'auth/area/edit',
        data: { id: id }
      }, (res) => {
        if (res.code === 8888) {
          this.edit_dialog_visible = true
          this.edit_form = res.data
          this.edit_form.the_jump = res.data.the_jump_value.toString()
        }
      })
    },
    // 提交编辑数据
    edit_send () {
      this.$refs.edit_ref.validate(valid => {
        if (valid) {
          this.$base.request({
            that: this,
            method: 'PUT',
            url: 'auth/area/update',
            data: this.edit_form
          }, (res) => {
            if (res.code === 8888) {
              this.$base.message({ that: this, message: res.msg })
              this.edit_dialog_visible = false
              this.get_list()
            }
          })
        }
      })
    },
    // 监听编辑对话框的关闭事件
    edit_dialog_close () {
      this.$refs.edit_ref.resetFields()
    }
  }
}
</script>
